<template>
  <div class="center examplex">
    <vs-navbar center-collapsed v-model="active">
      <template #left>
        <img @click="gohome" class="logo" src="../../assets/music.png" alt="">
        <p @click="gohome" class="title">Vue <span>Music</span></p>
      </template>
      <vs-navbar-item :active="active == 'repository'" id="repository">
        知识库
      </vs-navbar-item>
      <vs-navbar-item :active="active == 'photo'" id="photo">
        图片库
      </vs-navbar-item>
      <vs-navbar-item :active="active == 'you'" id="you">
        关于你
      </vs-navbar-item>
      <vs-navbar-item :active="active == 'me'" id="me">
        关于我
      </vs-navbar-item>
      <template #right>
        <vs-button flat  @click="login">登录</vs-button>
        <vs-button>主题</vs-button>
      </template>
    </vs-navbar>
    <div class="square">
      <div class="child">
        child 1
      </div>
      <div class="child">
        child 2
      </div>
      <div class="child">
        child 3
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'Head',
  props: {
    msg: String
  },
  data(){
    return{
      active:''
    }
  },
  methods:{
    // 登录
    login(){
      this.$router.push('/login');
    },

    // 回到首页
    gohome(){
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.center{

}
.center .logo{
  width: 20%;
}
.center .title {
  font-size: 1.4em;
  text-indent: 5px;
  color: #fe8254;
  text-shadow: 1px 1px #fe8254;
}
.center .title span{
  color: #707afa;
  text-shadow: 1px 1px #707afa;
}
.center vs-navbar-item{
}
.vs-navbar-content{
  border-radius: 2px 2px 10px 10px;
  box-shadow: 2px 2px 4px #195bff;
}
</style>
